@import "../../assets/css/tailwind.css";
html,
body {
  @apply w-screen h-screen;
}

body {
  background: url("/assets/login/images/login-bg.png");
  @apply bg-cover;
}

.div-icon {
  @apply absolute;
}

.div-icon img {
  @apply mx-2;
}

.div-icon p {
  @apply flex text-nowrap items-center;
  @apply size-6 sm:size-6 md:size-8 lg:size-10 xl:size-12 2xl:size-14;
}
.div-locale {
  z-index: 1;
  width: 130px;
  @apply absolute right-2 bg-transparent;
}
:root {
  --sl-input-background-color: transparent;
  --sl-input-border-color: transparent;
  --sl-input-border-color-focus: transparent;
  --sl-input-focus-ring-color: transparent;
}
.div-container {
  @apply grid place-items-center h-screen;

  .svg-grid {
    @apply fixed inset-0 h-full w-full inset-0;
    color: color-mix(in oklab, oklch(0.208 0.042 265.755) 12%, transparent);
    -webkit-mask-image: linear-gradient(to bottom left, #fff, #0000, #0000);
    mask-image: linear-gradient(to bottom left, #060606, #00000000, #0000);
  }
}

.box-center {
  @apply md:box-content min-w-96 relative text-gray-800;
}

.div-login-title {
  @apply mb-12;
  @apply text-center font-sans font-semibold;
  @apply text-xs sm:text-xs md:text-sm lg:text-base xl:text-lg 2xl:text-xl;
}

.div-login-text {
  @apply mt-3;
}

.div-login-input input {
  @apply mt-2 appearance-none text-slate-900 bg-white rounded-md block w-full px-3 h-8;
  @apply sm:text-sm placeholder:text-slate-400 focus:ring-2 focus:ring-sky-500 ring-1 ring-slate-200;
}
.button-login {
  @apply inline-flex justify-center rounded-lg text-sm font-semibold h-8 bg-indigo-500 text-white hover:bg-indigo-700 w-full;
}
.div-login-button{
  @apply  mt-10  mb-1;
}
.div-login-footer {
  @apply text-center mt-6 text-gray-600;
  p{
    @apply flex justify-around;
    &:hover{
      @apply  text-gray-800;
    }
  }
}

.div-footer {
  @apply absolute bottom-2 text-center w-screen text-gray-400;
}
.sl-toast-stack {
  left: 50%;
  top: 20%;
  transform: translate(-50%, -50%); /* 移动元素自身的一半尺寸 */
}
